<template>
  <section class="padding EndWaybillList">
    <el-card>
      <div slot="header" class="clearfix relative ">
        <span class="title-icon">进口商信息</span>
        <div class="absolute add-btn-box">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            @click="addInfo"
          >
            新增
          </el-button>
        </div>
      </div>

      <el-row :gutter="10">
        <el-col
          v-for="(item, index) in pickupInfo"
          :key="index"
          :md="24"
          :lg="12"
        >
          <div
            class="my-profile-info-box flex justify-between"
            :class="{ 'border-green': item.defaultValue == 1 }"
          >
            <div
              class="flex align-start flex-direction margin-right"
              style="width:90%"
            >
              <div class="margin-bottom flex align-start" style="width:100%;">
                <div class=" flex-sub text-cut">
                  <div class="margin-bottom text-cut">
                    公司名：{{ item.importerCompany }}
                  </div>
                  <div class="margin-bottom">
                    联系人：{{ item.importerAttn }}
                  </div>
                  <div class="margin-bottom">邮编：{{ item.zipCode }}</div>
                  <div>VAT：{{ item.vat }}</div>
                </div>
                <div class="flex-sub">
                  <div class="margin-bottom">
                    国家：{{ publicData.countryMap[item.importerCountry] }}
                  </div>
                  <div class="margin-bottom">
                    电话：{{ item.importerPhone }}
                  </div>
                  <div class="margin-bottom">EORI：{{ item.eori }}</div>
                </div>
              </div>
              <div>
                <div>地址：{{ item.importerAddress }}</div>
              </div>
            </div>
            <div
              class=" flex justify-end flex-direction text-right"
              style="width:10%"
            >
              <div class="text-lg">
                <el-tooltip content="编辑" effect="light" placement="top-end">
                  <i
                    class="el-icon-edit-outline pointer margin-right"
                    @click="editInfo(index)"
                  />
                </el-tooltip>
                <el-tooltip content="删除" effect="light" placement="top-end">
                  <i class="el-icon-delete pointer" @click="delInfo(index)" />
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog
      title="新增进口商信息"
      width="36%"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        label-position="left"
        label-width="120px"
        size="mini"
        :model="form"
        class="padding-lr-40"
      >
        <el-form-item prop="importerCompany">
          <div slot="label">公司名:</div>
          <el-input
            v-model="form.importerCompany"
            placeholder="请填写公司名"
            clearable
          />
        </el-form-item>
        <el-form-item prop="importerCountry">
          <div slot="label">国家:</div>

          <el-select
            v-model="form.importerCountry"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in publicData.countryList"
              :key="item.value"
              :label="item.label"
              :value="parseInt(item.value)"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="importerAttn">
          <div slot="label">联系人:</div>
          <el-input
            v-model="form.importerAttn"
            placeholder="请填写联系人"
            clearable
          />
        </el-form-item>
        <el-form-item prop="importerPhone">
          <div slot="label">联系方式:</div>
          <el-input
            v-model="form.importerPhone"
            placeholder="请填写联系方式"
            clearable
          />
        </el-form-item>
        <el-form-item prop="importerAddress">
          <div slot="label">地址:</div>
          <el-input
            v-model="form.importerAddress"
            placeholder="请填写地址"
            clearable
          />
        </el-form-item>

        <el-form-item prop="zipCode">
          <div slot="label">邮编:</div>
          <el-input v-model="form.zipCode" clearable placeholder="请填写邮编" />
        </el-form-item>
        <el-form-item prop="vat">
          <div slot="label">VAT:</div>
          <el-input v-model="form.vat" clearable placeholder="请填写VAT" />
        </el-form-item>

        <el-form-item prop="eori">
          <div slot="label">EORI:</div>
          <el-input v-model="form.eori" clearable placeholder="请填写EORI" />
        </el-form-item>

        <el-form-item prop="defaultValue">
          <div slot="label">是否默认:</div>
          <el-radio-group v-model="form.defaultValue">
            <el-radio :label="parseInt(1)">是</el-radio>
            <el-radio :label="parseInt(0)">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">{{
          editType == 'add' ? '立即创建' : '保存'
        }}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {
  customerimporterList,
  customerimporterSave,
  customerimporterDelete
} from '@/api/myProfile'
import { clone } from '@/utils/clone'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
  name: 'ImporterInformation',
  components: {},
  data() {
    return {
      editType: 'add',
      dialogFormVisible: false,
      form: {
        id: '',
        importerCompany: '',
        importerCountry: '',
        importerAttn: '',
        importerPhone: '',
        importerAddress: '',
        zipCode: '',
        defaultValue: 1,
        vat: '',
        eori: ''
      },
      pickupInfo: [],
      rules: {
        importerCompany: [
          { required: true, message: '请填写公司名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_\,\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: '请填写英文或者数字'
          }
        ],
        importerCountry: [
          { required: true, message: '请填写国家', trigger: 'change' }
        ],
        importerAttn: [
          { required: true, message: '请填写联系人', trigger: 'blur' }
        ],
        importerPhone: [
          { required: true, message: '请填写联系方式', trigger: 'blur' }
        ],
        zipCode: [{ required: true, message: '请填写邮编', trigger: 'blur' }],
        importerAddress: [
          { required: true, message: '请填写地址', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_\,\.\/\-\s+\!\@\#\$\%\^\&\*\(\)]*$/,
            message: '请填写英文或者数字'
          }
        ],
        eori: [{ required: false, message: '请填写EORI', trigger: 'blur' }],
        vat: [{ required: true, message: '请填写VAT', trigger: 'blur' }],
        defaultValue: [
          { required: true, message: '请选择是否默认', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['publicData'])
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.$store.dispatch('app/toggleDialog', true)
      const data = await customerimporterList({
        authorization: getToken()
      })
      this.pickupInfo = data
      this.$store.dispatch('app/toggleDialog', false)
    },
    addInfo() {
      if (this.pickupInfo.length >= 100) {
        this.dialogFormVisible = false
        this.$message.error('进口商上限100个')
      } else {
        this.editType = 'add'
        this.dialogFormVisible = true
      }
    },
    editInfo(index) {
      this.editType = 'edit'
      this.dialogFormVisible = true
      // 表达回显重置前提条件
      this.$nextTick(function() {
        this.form = clone(this.pickupInfo[index])
      })
    },
    async saveInfo() {
      this.$store.dispatch('app/toggleDialog', true)
      this.form.vat = this.form.vat.replace(/\s*/g, '')
      this.form.eori = this.form.eori.replace(/\s*/g, '')

      const data = await customerimporterSave(this.form)
      if (data.code === 200) {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.init()
        this.dialogFormVisible = false

        setTimeout(() => {
          this.$refs['ruleForm'].resetFields()
          this.form = {
            id: '',
            importerCompany: '',
            importerCountry: '',
            importerAttn: '',
            importerPhone: '',
            importerAddress: '',
            zipCode: '',
            vat: '',
            eori: ''
          }
        }, 1000)
      } else {
        this.$message.error(data.message)
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    delInfo(index) {
      this.$confirm('确认删除？')
        .then(_ => {
          this.$store.dispatch('app/toggleDialog', true)
          customerimporterDelete(this.pickupInfo[index].id).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '已删除',
                type: 'success'
              })
              this.init()
            } else {
              this.$message.error(res.message)
              this.$store.dispatch('app/toggleDialog', false)
            }
          })
        })
        .catch(_ => {})
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveInfo()
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      const fromId = this.form.id
      if (this.$refs[formName]) this.$refs[formName].resetFields()
      this.form = {
        id: fromId,
        importerCompany: '',
        importerCountry: '',
        importerAttn: '',
        importerPhone: '',
        importerAddress: '',
        zipCode: '',
        vat: '',
        eori: ''
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.resetForm('ruleForm')
        })
        .catch(_ => {})
    }
  }
}
</script>

<style scoped>
.EndWaybillList >>> .el-textarea__inner {
  min-height: 60px !important;
}
</style>

<style lang="scss" scoped>
.item {
  position: absolute;
  right: -25px;
  top: 3px;
  font-size: 20px;
}
.add-btn-box {
  right: 0;
  top: -6px;
}
</style>
